<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
      vue中的插值语法支持编写运算
         1. 函数调用
         2. 数学运算
         3. 三目运算    表达式 ？ 值1：值2
       注意:
           1.插值语法中不要编写表达式   var  num  =10   if  else
           2.插值语法中如果运算的过程比较复杂 不建议直接写在插值语法中  如处理过程比较复杂 可以通过vue中的计算属性解决
           3. 插值语法值实现标签内容的填充，不能使用在标签属性中  插值语法会被解析为普通字符串 没有响应式效果
           4. 插值语法不能解析含有html标签的文本    插值语法会将数据作为普通文本处理

           富文本编辑器    <b>加粗</b>  倾斜   颜色
-->
<div id="app">
    {{title}}
    <ul>
        <li>姓名:{{name.toUpperCase()}}</li>
        <li>{{age + 10}}</li>
        <li>{{age > 18}}</li>
        <li>{{age > 18 ? '成年':'未成年'}}</li>
        <li>{{true && false}}</li>
    </ul>
    <!--    错误用法-->
    <img src="{{img}}" alt="">
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            title: '<h1>学生信息</h1>',
            name: 'admin',
            age: 20,
            img: '1.png'
        }
    })
</script>

</body>
</html>